<!DOCTYPE html>
<html>
  <head>
    <title>IERange</title>

    <!--[if IE]>
    <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    <script type="text/javascript" src="ierange.js"></script>
    <![endif]-->

    <script>
firebug.env.height = 300;

function logRange() {
	var range = window.getSelection().getRangeAt(0);
	console.log('-----------------------------------------------');
	console.log('Range:', range)
	console.log('Start:', range.startContainer, range.startOffset);
	console.log('End:', range.endContainer, range.endOffset);
	console.log('Common Ancestor:', range.commonAncestorContainer);
}
function logSelection() {
	var selection = window.getSelection();
	console.log('-----------------------------------------------');
	console.log('Selection:', selection)
	console.log('Range count:', selection.rangeCount);
}
function logXML(b) {
	var a = document.createElement('DocumentFragment');
	a.appendChild(b);
	console.log(a.innerHTML);
}
function makeSelection() {
	// make a selection
	var range = document.createRange();
	range.setStart(document.getElementById('paragraph').firstChild.firstChild, 2);
	range.setEnd(document.getElementById('paragraph').lastChild, 2);
	var sel = window.getSelection();
	sel.removeAllRanges();
	sel.addRange(range);
}
window.onload = makeSelection;
function highlight() {
	var span = document.createElement('span');
	span.style.background = 'red';
	window.getSelection().getRangeAt(0).surroundContents(span);
	window.getSelection().removeAllRanges();
}

    </script>
<style>
html, body { margin: 0; padding: 0; }
#controls { margin: 0 0 1em; padding: 0.25em 0.5em; background: #aaa; border-bottom: 2px solid #777; }
#body { margin: 1em 0.5em; }
</style>
  </head>
  <body>
    <div id="controls">
     <input type="button" value="Log Selection" onclick="logSelection()">
     <input type="button" value="Log Range" onclick="logRange()">
     <button onclick="makeSelection()">Make a Selection</button><br>
     <input type="button" value="Clone Range" onclick="logXML(window.getSelection().getRangeAt(0).cloneContents())">
     <input type="button" value="Extract Range" onclick="logXML(window.getSelection().getRangeAt(0).extractContents())">
     <input type="button" value="Delete Range" onclick="window.getSelection().getRangeAt(0).deleteContents()">
     <input type="button" value="Surround Contents" onclick="highlight()">
    </div>
<div id="body">
    <h1>Range Sandbox</h1>
    <p>Test out <cite>IERange</cite> here!</p>
    <p id="paragraph"><strong>foo<!-- -->bar</strong>Heading 1<em>foo<!-- -->bar</em></p>
    <p>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;easdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>asdfasa;esgj dsf;lgjadfk;ldfg df<b>sgas</b>dfasdfA</p>
    <hr>
    <p>More text!</p>
</div>
  </body>
</html>
